﻿//导入指定模块
import QtQuick 2.0

//元素类型-Rectangle
Rectangle {
    //唯一id，相当于人名，通过id进行访问
    id: rect
    //属性-宽度
    width: 640
    //属性-高度
    height: 480
    //属性-颜色
    color: "gray"

    Rectangle {
        id: rect2
        visible: false
        //x坐标
        x: 112;
        //y坐标
        y: 12
        //宽度
        width: 76;
        //高度
        height: 96
        //边线颜色
        border.color: "lightsteelblue"
        //边线宽度
        border.width: 4
        //半径
        radius: 8
        //颜色
        color: "white"
    }

    Text {
        visible: false
        //文字内容
        text: "Qt Qml Text"
        //颜色
        color: "#FF0000"
        //字体
        font.family: "Ubuntu"
        //字号
        font.pixelSize: 28
    }

    Image{
        visible: false
        //图片路径
        source: "qrc:/meng.png"
    }

    Rectangle{
        id: rectMouse
        visible: false
        //宽度
        width: 50
        //高度
        height: 50
        color: "#ff0000"

        MouseArea{
            id: mouseArea
            //宽度
            width: parent.width
            //高度
            height: parent.height
            //响应点击事件
            onClicked: {
                if(rectMouse.color == "#ff0000"){
                    rectMouse.color = "#00ff00"
                }
                else{
                    rectMouse.color = "#ff0000"
                }
            }
        }
    }

    Column{
        id: column
        visible: false
        MyButton{
            id: button1
            //接收信号
            onClicked: text = "点1"
        }
        MyButton{
            id: button2
            //修改文字内容
            text: "按钮2"
            //接收信号
            onClicked: text = "点2"
        }
    }

    Item{
        anchors.fill: parent
        visible: false

        ClickableImage{
            id: img1
            x: 50
            y: 50
            onClicked: y += 20
        }

        ClickableImage{
            id: img2
            x: 200
            y: 50
            onClicked: rotation += 20
        }

        ClickableImage{
            id: img3
            x: 350
            y: 50
            onClicked: scale -= 0.1
        }
    }

    Column{
        visible: false
        x: 5
        y: 5
        //间距
        spacing: 5
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"; width: 96}
        //蓝方块
        MySquare{color: "#00bde3"}
    }

    Row{
        visible: false
        x: 5
        y: 5
        //间距
        spacing: 10
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"}
        //蓝方块
        MySquare{color: "#00bde3"}
    }

    Grid{
        visible: false
        x: 5
        y: 5
        //间距
        spacing: 10
        //行数
        rows: 2
        //列数
        columns: 3
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"}
        //蓝方块
        MySquare{color: "#00bde3"}

        MySquare{color: "#ea7025"}
        MySquare{color: "#ea7025"}
        MySquare{color: "#ea7025"}
    }

    Flow{
        visible: false
        //间距
        spacing: 10
        width: 96+10
        //红方块
        MySquare{color: "#ea7025"}
        //绿方块
        MySquare{color: "#67c111"}
        //蓝方块
        MySquare{color: "#00bde3"}
    }

    Grid{
        visible: false
        x: 5; y: 5
        spacing: 5

        Repeater{
            model: 16
            //红方块
            MySquare{color: "#ea7025"}
        }
    }


    BigSquare{
        visible: false
        anchors.centerIn: parent
        SmallSquare{
            anchors.right: parent.right
            anchors.top: parent.bottom
            anchors.topMargin: 10
        }
    }

    Rectangle{
        visible: false
        width: 200
        height: 100
        color: "linen"

        TextEdit{
            id: input
            x: 10; y: 10
            width: 180
            height: 80
            //裁切-防止超出边界
            clip: true
            //焦点
//            focus: true
            //设置换行模式
            wrapMode: TextEdit.Wrap
            text: "Text Edit"
        }
    }


    MySquare{
        x: 20; y: 20
        focus: true
        Keys.onLeftPressed: x-=5
        Keys.onRightPressed: x+=5
        Keys.onUpPressed: y-=5
        Keys.onDownPressed: y+=5
        visible: false
    }

    //动画
    Column{
        visible: false

        Image{
            id: imgAnim
            source: "qrc:/meng.png"

            //x属性动画
            NumberAnimation on x {
                //移动到300
                to: 300
                //持续2s
                duration: 2000
                //循环模式：无限
                loops: Animation.Infinite
                // 缓冲曲线
                easing.type: Easing.InOutElastic
            }
        }

        Image{
            id: imgAnim2
            source: "qrc:/meng.png"

            //x属性动画
            Behavior on x {
                NumberAnimation{
                    //持续2s
                    duration: 2000
                    // 缓冲曲线
                    easing.type: Easing.InOutBack
                }
            }
            MouseArea{
                anchors.fill: parent
                onClicked: imgAnim2.x = 300
            }
        }

        Image{
            id: imgAnim3
            source: "qrc:/meng.png"

            //x属性动画
            NumberAnimation{
                id: animX
                //作用目标
                target: imgAnim3
                //作用属性: x
                property: "x"
                //开始点
                from: 0
                //结束点
                to: 300
                //持续2s
                duration: 2000
                // 缓冲曲线
                easing.type: Easing.OutInBack
            }
            MouseArea{
                anchors.fill: parent
                onClicked: animX.start()
            }
        }
    }

    //动画分组
    Image{
        id: imgAnimGroup
        visible: false
        source: "qrc:/meng.png"

        ParallelAnimation{
            id: paralAnim

            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "x"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "y"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
        }
        SequentialAnimation{
            id: seqAnim

            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "x"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
            //属性动画
            NumberAnimation{ target: imgAnimGroup; property: "y"; from: 0; to: 300; duration: 2000; easing.type: Easing.Linear; }
        }

        MouseArea{
            anchors.fill: parent
            onClicked: seqAnim.start()
        }
    }

    //状态与过渡
    Item{
        id: itemState
        anchors.fill: parent

        Image{
            id: imgState1
            source: "qrc:/meng.png"
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                //切换状态
                if(itemState.state == "go"){
                    itemState.state = "back"
                }
                else{
                    itemState.state = "go"
                }
            }
        }

        //初始化
        state: "back"

        states: [
            //状态-go
            State {
                name: "go"
                PropertyChanges {target: imgState1; x: 300; }
            },
            //状态-back
            State {
                name: "back"
                PropertyChanges {target: imgState1; x: 0; }
            }
        ]

        transitions: [
            Transition {
                from: "back"; to: "go"
                NumberAnimation { target: imgState1; property: "x"; duration: 2000}
            },
            Transition {
                to: "back"
                NumberAnimation { target: imgState1; property: "x"; duration: 300}
            }
        ]
    }

}
